<template>
    <el-dialog
        title="协议提示"
        :visible.sync="showValue"
        append-to-body
        :close-on-click-modal="false"
        width="700px"
        top="30px"
        :before-close="clearData"
    >
        <div slot="title" class="dialog-footer">
            <span style="margin-right: 20px">购买服务</span>
            <span>商家: {{ companyName }}</span>
        </div>
        <div class="w100 row" style="height: 40px" v-if="step === 1">
            <div
                class="h100 col item"
                style="border-radius: 5px; background: #5fb878; color: #fff"
            >
                1.第一步:选择支付方式
            </div>
            <div class="h100 col" style="width: 10px"></div>
            <div
                class="h100 col item"
                style="border-radius: 5px; background: #eeeeee; color: #ababab"
            >
                2.第二步:扫码支付
            </div>
        </div>
        <div class="w100 row" style="height: 40px" v-if="step === 2">
            <div
                class="h100 col item"
                style="border-radius: 5px; background: #9dc8e2; color: #fff"
            >
                1.第一步:选择支付方式
            </div>
            <div class="h100 col" style="width: 10px"></div>
            <div
                class="h100 col item"
                style="border-radius: 5px; background: #5fb878; color: #fff"
            >
                2.第二步:扫码支付
            </div>
        </div>
        <div
            class="w100 row"
            style="height: 5px; margin: 5px 0"
            v-if="step === 1"
        >
            <div
                class="h100 col item"
                style="
                    border-top-left-radius: 5px;
                    border-bottom-left-radius: 5px;
                    background: #5fb878;
                "
            ></div>
            <div
                class="h100 col item"
                style="
                    border-top-right-radius: 5px;
                    border-bottom-right-radius: 5px;
                    background: #eeeeee;
                "
            ></div>
        </div>
        <div
            class="w100 row"
            style="height: 5px; margin: 5px 0"
            v-if="step === 2"
        >
            <div
                class="h100 col item"
                style="
                    border-top-left-radius: 5px;
                    border-bottom-left-radius: 5px;
                    background: #5fb878;
                "
            ></div>
            <div
                class="h100 col item"
                style="
                    border-top-right-radius: 5px;
                    border-bottom-right-radius: 5px;
                    background: #5fb878;
                "
            ></div>
        </div>
        <el-table
            :data="opeData"
            style="width: 100%"
            size="mini"
            stripe
            :show-header="false"
            v-if="step === 1"
        >
            <el-table-column prop="opeName" label="操作名称">
                <template slot-scope="scope">
                    <span
                        class="red"
                        v-if="
                            scope.row.opeType === 8 ||
                            scope.row.opeType === 9 ||
                            scope.row.opeType === 10
                        "
                        >*</span
                    >
                    <span>{{ scope.row.opeName }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="opeName" label="操作名称">
                <template slot-scope="scope">
                    <el-radio-group
                        v-model="payWay"
                        v-if="scope.row.opeType === 1"
                    >
                        <el-radio :label="1">微信支付</el-radio>
                        <!-- <el-radio :label="0">支付宝支付</el-radio> -->
                    </el-radio-group>
                    <div v-if="scope.row.opeType === 2">
                        {{ precision(rule.price) }}
                    </div>
                    <div v-if="scope.row.opeType === 3">
                        {{ rule.buyDays }}
                    </div>
                    <div v-if="scope.row.opeType === 4">
                        {{ rule.giftDays }}
                    </div>
                    <div v-if="scope.row.opeType === 5">
                        {{ precision(rule.unitPrice) }}
                    </div>
                    <div v-if="scope.row.opeType === 6">
                        <el-switch
                            v-model="addressForm.isNeedReceipt"
                            :active-value="1"
                            :inactive-value="0"
                        >
                        </el-switch>
                    </div>
                    <div v-if="scope.row.opeType === 7">
                        <el-checkbox
                            :true-label="1"
                            :false-label="0"
                            v-model="addressForm.isCheck"
                        ></el-checkbox>
                        <el-link
                            type="primary"
                            @click="showTip = true"
                            target="_black"
                            >我已阅读并同意相关服务条款</el-link
                        >
                    </div>
                    <div
                        v-if="
                            scope.row.opeType === 8 &&
                            addressForm.isNeedReceipt === 1
                        "
                    >
                        <el-input
                            class="item"
                            size="mini"
                            v-model="addressForm.companyName"
                        ></el-input>
                    </div>
                    <div
                        v-if="
                            scope.row.opeType === 9 &&
                            addressForm.isNeedReceipt === 1
                        "
                    >
                        <el-input
                            class="item"
                            size="mini"
                            v-model="addressForm.taxID"
                        ></el-input>
                    </div>
                    <div
                        v-if="
                            scope.row.opeType === 10 &&
                            addressForm.isNeedReceipt === 1
                        "
                    >
                        <el-input
                            class="item"
                            size="mini"
                            v-model="addressForm.address"
                        ></el-input>
                        <el-link type="primary" @click="showSelect = true"
                            >选择</el-link
                        >
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-form size="mini" v-show="step === 2">
            <el-form-item label="扫码支付" label-width="100px">
                <div class="qrcode">
                    <vue-qr
                        :text="qrText"
                        :size="qrSize"
                        :margin="qrMargin"
                        :logoSrc="qrLogoSrc"
                        :logoScale="qrLogoScale"
                    ></vue-qr>
                </div>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button
                plain
                type="primary"
                size="mini"
                v-if="step === 1"
                :loading="loading"
                @click="step2"
                :disabled="
                    addressForm.isNeedReceipt === 1 &&
                    (!addressForm.companyName ||
                        !addressForm.taxID ||
                        !addressForm.address)
                "
                >下一步</el-button
            >
            <el-button
                plain
                type="primary"
                size="mini"
                v-if="step === 1"
                @click="clearData"
                >取消</el-button
            >
            <el-button
                plain
                type="primary"
                size="mini"
                v-if="step === 2"
                @click="clearData"
                >取消支付</el-button
            >
            <!-- <el-button plain type="primary" size="mini" v-if="step===2" @click="pay">支付</el-button> -->
        </div>
    </el-dialog>
</template>

<script>
import vueQr from 'vue-qr'
import qrLogoSrc from '@/common/pic/weChat.png'
export default {
    components: {
        vueQr
    },
    props: {
        value: Boolean,
        currRow: Object,
        companyName: String,
        companyCode: String
    },
    data () {
        return {
            agreementContent: '',
            showValue: false,
            addressForm: {
                isNeedReceipt: 0,
                isCheck: 0,
                companyName: '',
                taxID: '',
                address: ''
            },
            showSelect: false,
            loading: false,
            stop: true, // 是否停止轮询
            queryorderTimer: null,
            qrText: '13',
            qrSize: 250,
            qrMargin: 10,
            qrLogoScale: 40,
            qrLogoSrc: qrLogoSrc,
            startPay: false, // 是否已发起支付,控制是否显示倒计时
            showConfirm: false, // 是否显示确认弹框,当倒计时到0的时候,用于显示是否继续等待的弹框
            time: 5, // 显示的倒计时
            timeTotal: 120, // 轮询接口的总时间，超过则算是超时

            form: {}, // 支付确认表单
            opeData: [
                {
                    opeName: '选择支付方式',
                    opeType: 1
                },
                {
                    opeName: '支付金额',
                    opeType: 2
                },
                {
                    opeName: '购买天数',
                    opeType: 3
                },
                {
                    opeName: '赠送天数',
                    opeType: 4
                }
            ], // 操作列表
            rule: {}, // 当前规则
            payWay: 1, // 支付方式
            step: 1 // 当前步骤
        }
    },
    watch: {
        value (val) {
            console.log(val)
            this.showValue = val
        },
        showValue (val) {
            if (val) {
                this.rule = this.copyArr(this.currRow)
            }
            this.$emit('update:value', val)
        }
    },
    methods: {
        step2 () {
            this.creatQrCode()
        },
        async creatQrCode () {
            this.loading = true
            let res = await this.$axios.post(this.$store.state.ip + '/server/serverorder/create', {
                data: {
                    companyCode: this.companyCode,
                    agentId: this.$store.state.loginParams.agentId,
                    paymentMoney: this.currRow.price,
                    paymentType: 1,
                    buyStaffType: this.$store.state.loginParams.source === '0' || this.$store.state.loginParams.source === '3' ? 1 : 2,
                    buyStaffId: this.$store.state.loginParams.source === '0' || this.$store.state.loginParams.source === '3' ? this.$store.state.loginParams.agentId : this.$store.state.loginParams.companyCode,
                    buyStaffName: this.$store.state.loginParams.source === '0' || this.$store.state.loginParams.source === '3' ? this.$store.state.loginParams.agentName : this.$store.state.loginParams.companyName,
                    remark: '',
                    ruleId: this.currRow.ruleID
                }
            })
            let response = res.data
            this.loading = false
            if (response.ret === '0') {
                this.$message({
                    message: '下单成功',
                    type: 'success'
                })
                this.qrText = response.data.commonurl
                this.queryorderTimers(response.data.businessno)
                this.step = 2
            }
        },

        queryorderTimers (orderNo) {
            // 定时 查询
            this.queryorderTimer = setInterval(() => {
                this.queryorder(orderNo)
            }, 3 * 1000)
        },
        async queryorder (orderNo) {
            let res = await this.$axios.post(this.$store.state.ip + '/server/serverorder/queryorder', {
                data: {
                    orderNo: orderNo
                }
            })
            let response = res.data
            this.loading = false
            if (response.ret === '0') {
                if (response.data.status === 2 || response.data.status === 3) {
                    this.clearIntervalTimer()
                    this.stop = true
                    this.$message({
                        message: '购买成功',
                        type: 'success'
                    })
                    this.clearData()
                }
            } else {
                this.$message({
                    message: response.msg || '订单查询失败',
                    type: 'warning'
                })
            }
        },
        clearIntervalTimer () {
            // 清除定时器
            if (!this.queryorderTimer) {
                return
            }
            clearInterval(this.queryorderTimer)
            this.queryorderTimer = null
            let timer = setTimeout(() => {
                clearTimeout(timer)
                timer = null
            }, 3 * 1000)
        },
        // 清空数据
        clearData () {
            this.loading = false
            this.showValue = false
            this.step = 1
            this.stop = true
            this.startPay = false
            this.showConfirm = false
            this.addressForm = {
                isNeedReceipt: 0,
                isCheck: 0,
                companyName: '',
                taxID: '',
                address: ''
            }
            this.clearIntervalTimer()
        },
        // 保存表单
        save (val) {
            this.$emit('getList')
            this.clearData()
        }
    }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
img
    width: 200px
    height: 200px
    background-color: #fff
    padding: 6px
    box-sizing: border-box

.topWrap
    margin: 10px
    box-sizing: border-box
    border: 1px solid rgba(0, 0, 0, 0.2)
    border-radius: 2px

.checkWrap
    width: 230px
    height: 130px
    margin: 10px
    box-sizing: border-box
    border: 1px solid rgba(0, 0, 0, 0.2)
    position: relative
    overflow: hidden
    border-radius: 2px

.qrcode
    margin-top: 20px
    margin-left: 80px

.buttonWrap
    margin-top: 20px
    font-size: 13px
    box-sizing: border-box
    padding: 10px
    border: 1px solid rgba(0, 0, 0, 0.2)
    background: #FCFCFC
    border-radius: 2px

.rec
    position: absolute
    right: -25px
    top: 0
    transform: rotate(45deg)
    width: 80px
    height: 25px
    font-size: 14px
    color: #fff

.item
    width: 200px

.red
    color: red
</style>